<!--
 * @Description: 认证
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-05-05 14:25:55
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-11 13:50:03
 * @FilePath: \jiekuan-app\src\subPages\other\authentication.vue
-->
<template>
	<div class="page">
		<div class="page-header">
			<u-navbar title="认证" :background="nav_background" title-color="#fff" back-icon-color="#fff" :height="60"
				:border-bottom="false"></u-navbar>
		</div>
		<div class="page-content">
			<div class="title">基本资料</div>
			<div class="text u-m-t-45">上传本人头像，女生更放心与你见面~</div>
			<div class="u-flex all-center u-m-t-60 u-p-t-10">
				<div class="u-rela">
					<image :src="avatar" class="avatar" @click="handleImg" alt="" />
					<image src="../../static/images/authentication_camera.png" class="authentication_camera" alt="" />
				</div>
			</div>
			<div class="u-m-t-60 u-p-t-20"></div>
			<div class="u-m-t-20 text-center authentication_right">
				<image src="../../static/images/authentication_right-arrow.png"
					class="authentication_right-arrow u-m-b-18" alt="" />
				<div @click="isPopup = true">立即认证</div>
			</div>
			<div class="hint text-center">为保护您的隐私，您的信息只有认证过的 女生可以看到，请放心认证。</div>
		</div>
		<div class="page-footer"></div>
		<u-popup v-model="isPopup" width="500" mode="center" border-radius="25">
			<view class="pop_box text-center u-rela">
				<image src="../../static/images/authentication_close.png" class="authentication_close" alt=""
					@click="isPopup = false" />
				<div class="title">真实头像认证</div>
				<div class="text u-m-t-30">大幅提高配对率，享受专属特权</div>
				<div class="u-m-t-60 u-flex u-row-between">
					<div v-for="(item, index) in imgs_hint" :key="index" class="imgs_hint">
						<image :src="item.img" class="icon u-m-b-25" alt="" />
						<div>{{ item.name }}</div>
					</div>
				</div>
				<div class="u-m-t-60 u-p-t-60 hint">完成认证可以提升信用度、推荐值</div>
				<div class="u-m-t-60 u-p-t-14" style="position: relative;">
					<button class="btn"  @click="handleImgs">立即认证</button>
				</div>
			</view>
		</u-popup>
		<div class="avatar_upload" @click.stop="">
			<uploadView uploadText="" ref="avatar" moduleName="avatar" :maxCount="9" 
				:fileList="avatarList"
				@onChange="handleUploadChange" 
				@onPreview="handleUploadPreview" 
				@onRemove="handleUploadRemove"
				class="avatar_upload" :width="1" :height="1">
			</uploadView>
		</div>
		<div class="avatar_upload" @click.stop="">
			<uploadView uploadText="" ref="avatars" moduleName="avatar" 
				:fileList="avatarLists"
				@onChange="handleUploadChanges" 
				class="avatar_upload" :width="1" :height="1">
			</uploadView>
		</div>
	</div>
</template>

<script>
	import uploadView from '@/components/yl-uploadView'
	export default {
		name: 'Authentication', // 页面名称
		components: {
			uploadView
		}, // 挂载组件
		props: {}, // 组件传值
		data() {
			
			return {
				form_msg: {
					icon: '', // 头像
					nickname: '', // 昵称
					birth: '', // 出生日期
					height: '', // 身高
					weight: '', // 体重
					job: '', // 职业
					gender: 0, // 性别
					personalizedSignature: '', // 简介
					detailLocation: '', // 详细地址
					latitude: '', // 纬度
					longitude: '', // 经度
					province: '', // 省/直辖市
					city: '', // 市
					region: '', // 区
				}, // 表单数据
				nav_background: {
					background: 'transparent'
				},
				isPopup: false,
				imgs_hint: [{
						name: '认证标识',
						img: '../../static/images/authentication_protection.png'
					},
					{
						name: '交流更放心',
						img: '../../static/images/authentication_comment.png'
					},
					{
						name: '优先推荐',
						img: '../../static/images/authentication_top.png'
					},
				],
				avatar: '', // 头像
				avatars:'',
				avatarList: [],
				avatarLists: [],
			}
		},
		computed: {}, // 计算机属性 类似与data概念
		watch: {}, // 监控data中数据变化
		created() {}, // 生命周期-创建完成(可以访问当前this实例)
		mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
		methods: {
			// 上传照片
			handleImg() {
				this.$refs.avatar.$refs.uUpload.selectFile()
			},
			handleImgs() {
				this.isPopup = false;
				this.$refs.avatars.$refs.uUpload.selectFile()
			},
			// 相册更新/图片/视频上传
			apiPostUpdateAlbum(img) {
				const params = {
					approveFlag: 1,
					sourceType: 0,
					sourceUrl: img,
					readType: 0,
				}
				this.$u.api.PostUpdateAlbum(params).then((res) => {})
			},
			/**
			 * @author: yiling (315800015@qq.com)
			 * @description: 全屏预览图片时触发
			 * @param {String} url 为当前选中的图片地址
			 * @param {Array} lists 目前组件内的所有图片数组，index为通过props传递的index参数
			 * @param {Number} name 为通过props传递的index参数(1.6.1加入)
			 * @return {*}
			 * @Date: 2021-04-17 11:36:57
			 */
			handleUploadPreview(options) {
				uni.setStorageSync('uploadRefresh', true)
			},
			/**
			 * @author: yiling (315800015@qq.com)
			 * @description: 移除图片时触发
			 * @param {Number} index 索引
			 * @param {Array} lists 完整数据
			 * @param {Number} name 通过props传递的index参数
			 * @return {*}
			 * @Date: 2021-04-18 13:09:47
			 */
			handleUploadRemove(options) {
				const {
					index,
					lists,
					name,
					moduleName
				} = options
				console.log('onRemove', options)
				this.avatar = ''
				this.avatarList = []
			},
			apiPostUpdateInfo() {
				this.$u.api.PostUpdateInfo(this.form_msg).then((res) => {
					this.$toast('修改资料成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				})
			},
			/**
			 * @author: yilingsj（315800015@qq.com）
			 * @description: 上传后触发
			 * @param {type}
			 * @return:
			 * @Date: 2020-07-20 10:43:06
			 */
			handleUploadChange(options) {
				console.log(options, '引用后上传结束')
				const {
					res,
					index,
					lists,
					moduleName
				} = options
				const data = JSON.parse(res.data)
				this.avatar = data.data
				this.form_msg.icon = data.data
				this.apiPostUpdateInfo()
			},
			handleUploadChanges(options) {
				console.log(options, '引用后上传结束')
				const {
					res,
					index,
					lists,
					moduleName
				} = options
				const data = JSON.parse(res.data);
				var sourceType = 1;
				if(lists[lists.length-1].file.type){
					sourceType = 0;
				}
				console.log("1234567890");
				console.log(data);
				this.avatars = data.data;
				const params = {
					approveFlag: 1,
					sourceType: sourceType,
					sourceUrl: data.data,
					readType: 0,
				}
				this.$u.api.PostUpdateAlbum(params).then((res) => {
					console.log(res);
					this.$toast('认证已上传')
				})
			},
		}, // 挂载一些方法
		onLoad(options) {
			this.$u.api.info().then((res) => {
				for (const key in this.form_msg) {
					if (key === 'birth' && res.data.birthday) {
						const birth_err = res.data.birthday.split(' ')
						const birth = birth_err[0].replaceAll('/', '-')
						this.form_msg.birth = birth
					} else {
						this.form_msg[key] = res.data[key]
					}
				}
				this.avatar = res.data.icon;
			})
		}, // 生命周期回调—监听页面加载
		onShow() {}, // 生命周期回调—监听页面显示
		onReady() {}, // 生命周期回调—监听页面初次渲染完成
		onHide() {}, // 生命周期回调—监听页面隐藏
		onUnload() {}, // 生命周期回调—监听页面卸载
	}
</script>

<style lang="scss" scoped>
	.page {
		background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
		width: 100%;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.page-content {
		padding: 20rpx 55rpx;

		.title {
			font-size: 31rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #ffffff;
		}

		.text {
			font-size: 25rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #dcdcdc;
		}

		.hint {
			font-size: 25rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #d7443e;
			margin: 150rpx 95rpx;
			line-height: 38rpx;
		}
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background-color: #fff;
	}

	.authentication_camera {
		position: absolute;
		width: 45rpx;
		height: 45rpx;
		bottom: 0;
		right: 0;
	}

	.authentication_right-arrow {
		width: 80rpx;
		height: 80rpx;
	}

	.authentication_right {
		font-size: 31rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
	}

	.pop_box {
		padding: 80rpx 60rpx 70rpx;

		.title {
			font-size: 31rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #000000;
		}

		.text {
			font-size: 25rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #646464;
		}

		.hint {
			font-size: 21rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #646464;
		}
	}

	.authentication_close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.icon {
		width: 80rpx;
		height: 80rpx;
	}

	.imgs_hint {
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #000000;
		text-align: center;
	}

	.btn {
		width: 360rpx;
		height: 90rpx;
		background: #fcc307;
		border-radius: 45rpx;
		font-size: 33rpx;
		font-family: Microsoft YaHei UI;
		font-weight: bold;
		color: #ffffff;
		line-height: 90rpx;
	}

</style>
